<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>实时监控RT</title>
  <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.0.7/dist/g2.min.js"></script>
</head>
<body>
<p>RT统计</p>
<br>
<div id='container' style="margin: 10px"/>
</body>

<script>
  const chart = new G2.Chart({
    container: 'container',
    autoFit: false,
    height: 6000,
    width: 1000
  });
  chart.scale({
    value: {
      min: 0,
      alias: '毫秒',
    },
  });
  chart.axis('cat*type', {
    tickLine: null,
    line: null,
  });
  chart.axis('value', {
    label: null,
    title: {
      offset: 30,
      style: {
        fontWeight: 300,
      },
    },
    grid: null,
  });
  chart.legend(false);
  chart.coordinate('rect').transpose();
  chart.interval()
    .position('type*value')
    .color('cat', ['#face1d', '#37c461', '#2194ff'])
    .label('value', {
      style: {
        fill: '#8d8d8d',
      }
    });
  chart.interaction('element-active');
  fetch('./data', {method: 'PATCH'})
    .then(res => res.json())
    .then(data => {
      chart.data(trans(data));
      chart.render();
    });

  function trans(data) {
    let storage = [];
    for (var key in data) {
      if (key.includes("-requests")) {
        let cat = key.slice(key.lastIndexOf(".") + 1).replace("-requests", "").toLocaleUpperCase();
        storage.push(
          {
            cat: cat,
            type: cat + "-P75",
            value: data[key]["75%"] == 0 ? 1 : data[key]["75%"]
          },
          {
            cat: cat,
            type: cat + "-P95",
            value: data[key]["95%"] == 0 ? 1 : data[key]["95%"]
          },
          {
            cat: cat,
            type: cat + "-P98",
            value: data[key]["98%"] == 0 ? 1 : data[key]["98%"]
          },
          {
            cat: cat,
            type: cat + "-P99",
            value: data[key]["99%"] == 0 ? 1 : data[key]["99%"]
          },
          {
            cat: cat,
            type: cat + "-P99.9",
            value: data[key]["99.9%"] == 0 ? 1 : data[key]["99.9%"]
          },
          {
            cat: cat,
            type: cat + "-min",
            value: data[key]["min"] == 0 ? 1 : data[key]["min"]
          },
          {
            cat: cat,
            type: cat + "-mid",
            value: data[key]["median"] == 0 ? 1 : data[key]["median"]
          },
          {
            cat: cat,
            type: cat + "-max",
            value: data[key]["max"] == 0 ? 1 : data[key]["max"]
          }
        );
      }
    }
    return storage;
  }
</script>
</html>
